<%--
  Created by IntelliJ IDEA.
  User: Distance
  Date: 2021/11/1
  Time: 16:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script>
    //使用javascript语言发起Ajax请求，访问服务器AjaxServlet中ajaxServlet
    //局部且异步
    function ajaxRequest(){
        //1.创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLHttpRequest();
        //2.调用open方法设置请求方式和请求地址
        xmlHttpRequest.open("GET","http://localhost:8080/JavaWeb1_war_exploded/ajaxServlet?action=ajaxServlet1",true);
        //4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
        xmlHttpRequest.onreadystatechange = function (){
            //readyState 有4个属性值 0表示未完成初始化  4表示已经处理完成  status表示服务器是否正常 200表示正常 404表示不存在
            if(xmlHttpRequest.readyState== 4 && xmlHttpRequest.status==200){
               var d = document.getElementById("div_id");
               //将发送过来的Json字符串转换为Json对象
                //xmlHttpRequest.responseText 获得请求过来的信息
                var Json = JSON.parse(xmlHttpRequest.responseText);
                d.innerText="id:"+Json.id+"姓名:"+Json.name;
            }
        }

        //3.调用send方法发送请求
        xmlHttpRequest.send();
    }


</script>
<body>
<button onclick="ajaxRequest()">Request</button>
<div id="div_id"></div>
</body>
</html>
